<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>招聘进度</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/template.css" media="all">
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <style>
        #main{
            width: 810px;
            height: 110px;
        }
    </style>

</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card" style="padding-top: 5px">
          <!-- 搜索条件开始 -->
          <div class="layui-form">
              <div class="layui-form-item">
                  <div class="layui-inline">
                      <label class="layui-form-label">招聘项目:</label>
                      <div class="layui-input-block">
                          <select name="aa" lay-filter="demo" lay-verify="required">
                              <option th:each="project:${projects}" th:value="${project.id}">[[${project.name}]]</option>
                          </select>
                      </div>
                  </div>
              </div>
          </div>
          <!-- 搜索条件结束 -->
            <div class="layui-col-md5">
                <input th:value="${length}" id="length" type="hidden">
                <table class="layui-table" id="particularTable">
                    <colgroup>
                        <col width="8%">
                        <col width="44%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>用人单位</th>
                            <th>招聘人数</th>
                            <th>已收简历数</th>
                            <th>已考核人员</th>
                            <th>已录用人员</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="plan,index:${list}" th:id="${index.count}">
                            <td th:text="${index.count}"></td>
                            <td th:text="${plan.getUnit()}"></td>
                            <td th:text="${plan.getHireNumber()}"></td>
                            <td th:text="${plan.getResume()}"></td>
                            <td th:text="${plan.getAssessment()}"></td>
                            <td th:text="${plan.getHired()}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
<!--            柱状图-->
            <div class="layui-col-md7">
                <div class="layui-card">
                    <div class="layui-card-header">招聘计划</div>
                    <div id="main"></div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../../layuiadmin/layui/layui.js"></script>

  <script type="text/javascript">

          $(document).ready(function(){
              //改变图表的高度
              var length = $("#length").val()
              var height = 155 + 38*length
              console.log('length---'+length)
              var echart =$("#main");
              echart.css("height",height+"px");
              // echart.css("height","800px");


              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              //数据加载完之前先显示一段简单的loading动画
              myChart.showLoading();
              $.ajax({
                  type : "get",
                  async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                  url : "/home/bar/"+0,    //请求发送到dataActiont处
                  dataType : "json",        //返回数据形式为json
                  success : function(result) {
                      //请求成功时执行该函数内容，result即为服务器返回的json对象
                      if (0 == result.code) {
                          myChart.hideLoading();    //隐藏加载动画
                          var hireList = result.hireList
                          var hiredList  = result.hiredList
                          // var bottom = 75-(hireList.length-1)*10
                          hiredList.reverse()
                          hireList.reverse()
                      }
                      myChart.setOption({        //加载数据图表
                          legend: {
                              data: ['招聘人数', '已录取人数']
                          },
                          tooltip: {
                              trigger: 'axis',
                              axisPointer: {
                                  type: 'shadow'
                              }
                          },
                          /*title: {
                              text: '招聘计划'
                          },*/
                          grid: {
                              // left: '0.5%',
                              // right: '4%',
                              // bottom: '12%',
                              top:45,
                              x: 4,
                              // x2: -700,
                              y: 0,
                              y2: 50,
                              containLabel: true
                          },
                          xAxis: {
                              type: 'value',
                          },
                          yAxis: {
                              type: 'category',
                          },
                          series: [
                              {
                                  name: '招聘人数',
                                  type: 'bar',
                                  label: {
                                      show: true,
                                      position: 'right',
                                  },
                                  width: 2,
                                  color: 'rgb(30, 159, 255)',
                                  data: hireList,
                                  // data: [20,12,32]
                              },
                              {
                                  name: '已录取人数',
                                  type: 'bar',
                                  label: {
                                      show: true, //开启显示
                                      position: 'inside',//数值展示的位置
                                      formatter:function(params){//设置显示的数据
                                          return (hiredList[params.dataIndex]/hireList[params.dataIndex]*100).toFixed(2)+ '%'
                                      }
                                  },
                                  width: 2,
                                  color: 'rgb(0, 150, 136)',
                                  data: hiredList,
                                  // data: [2,11,3],
                                  barGap: '0%',
                                  barCategoryGap: 10
                              },
                          ]
                      });
                  },
                  error : function() {
                      myChart.hideLoading();
                  }
              })//end ajax
          });

  </script>

  <script type="text/javascript">

      layui.use(['layer', 'jquery', 'form','layedit','laydate'], function () {
          var layer = layui.layer,
              $ = layui.jquery,
              form = layui.form,
              laydate = layui.laydate,
              layedit = layui.layedit;

          form.on('select(demo)', function(data){
              var projectId = data.value
              console.log(projectId)
              $.ajax({
                  async : true,
                  type: 'post',
                  url: '/home/toAjxa/'+projectId,
                  dataType: JSON,
                  success: function (res) {

                      //改变图表的高度
                      var length = json.length
                      var height = 155 + 38*length
                      console.log('height---'+height)
                      // $("#main").css("height","100px");
                      $("#main").css("height",height+"px");

                      //改变表格内容
                      var data = res.list
                      var json=JSON.parse(data);
                      $("#particularTable td").remove()
                      $.each(json.list,function(index,item){
                          console.log(item.unit)
                          var tr;
                          tr='<td>'+index+'</td>'+'<td>'+item.unit+'</td>'+'<td>'+item.hireNumber+'</td>'
                              +'<td>'+item.resume+'</td>'+'<td>'+item.assessment+'</td>'+'<td>'+item.hired+'</td>';
                          $("#particularTable").append('<tr>'+tr+'</tr>')
                      })

                      //改变图表的高度
                      var length = json.length
                      var height = 155 + 38*length
                      console.log('height---'+height)
                      // $("#main").css("height","100px");
                      $("#main").css("height",height+"px");

                      //图表操作
                      echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
                      var myChart = echarts.init(document.getElementById('main'));//构建下一个实例
                      myChart.resize();        //非常的重要！！！！重置图表的大小

                      myChart.setOption({        //加载数据图表
                          legend: {
                              data: ['招聘人数', '已录取人数']
                          },
                          tooltip: {
                              trigger: 'axis',
                              axisPointer: {
                                  type: 'shadow'
                              }
                          },
                          /*title: {
                              text: '招聘计划'
                          },*/
                          grid: {
                              top:45,
                              x: 4,
                              // x2: -700,
                              y: 0,
                              y2: 50,
                              containLabel: true
                          },
                          xAxis: {
                              type: 'value',
                          },
                          yAxis: {
                              type: 'category',
                          },
                          series: [
                              {
                                  name: '招聘人数',
                                  type: 'bar',
                                  label: {
                                      show: true,
                                      position: 'right'
                                  },
                                  width: '2px',
                                  color: 'rgb(30, 159, 255)',
                                  data: hireList,
                              },
                              {
                                  name: '已录取人数',
                                  type: 'bar',
                                  label: {
                                      show: true, //开启显示
                                      position: 'inside',//数值展示的位置
                                      formatter:function(params){//设置显示的数据
                                          return (hiredList[params.dataIndex]/hireList[params.dataIndex]*100).toFixed(2)+ '%'
                                      }
                                  },
                                  width: 2,
                                  color: 'rgb(0, 150, 136)',
                                  data: hiredList,
                                  barGap: '0%',
                                  barCategoryGap: '10px'
                              }
                          ]
                      });
                  },
                  error : function(res) {
                      //改变表格内容
                      var data = res.responseText
                      var json=JSON.parse(data);
                      var hireList = json.hireList.reverse()
                      var hiredList = json.hiredList.reverse()
                      $("#particularTable td").remove()
                      $.each(json.list,function(index,item){
                          var tr;
                          tr='<td>'+index+'</td>'+'<td>'+item.unit+'</td>'+'<td>'+item.hireNumber+'</td>'
                              +'<td>'+item.resume+'</td>'+'<td>'+item.assessment+'</td>'+'<td>'+item.hired+'</td>';
                          $("#particularTable").append('<tr>'+tr+'</tr>')
                      })

                      //改变图表的高度
                      var length = json.length
                      var height = 155 + 38*length
                      console.log('height---'+height)
                      // $("#main").css("height","100px");
                      $("#main").css("height",height+"px");

                      //图表操作
                      echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
                      var myChart = echarts.init(document.getElementById('main'));//构建下一个实例
                      myChart.resize();        //非常的重要！！！！重置图表的大小

                      myChart.setOption({        //加载数据图表
                          legend: {
                              data: ['招聘人数', '已录取人数']
                          },
                          tooltip: {
                              trigger: 'axis',
                              axisPointer: {
                                  type: 'shadow'
                              }
                          },
                          /*title: {
                              text: '招聘计划'
                          },*/
                          grid: {
                              top:45,
                              x: 4,
                              // x2: -700,
                              y: 0,
                              y2: 50,
                              containLabel: true
                          },
                          xAxis: {
                              type: 'value',
                          },
                          yAxis: {
                              type: 'category',
                          },
                          series: [
                              {
                                  name: '招聘人数',
                                  type: 'bar',
                                  label: {
                                      show: true,
                                      position: 'right'
                                  },
                                  width: '2px',
                                  color: 'rgb(30, 159, 255)',
                                  data: hireList,
                              },
                              {
                                  name: '已录取人数',
                                  type: 'bar',
                                  label: {
                                      show: true, //开启显示
                                      position: 'inside',//数值展示的位置
                                      formatter:function(params){//设置显示的数据
                                          return (hiredList[params.dataIndex]/hireList[params.dataIndex]*100).toFixed(2)+ '%'
                                      }
                                  },
                                  width: 2,
                                  color: 'rgb(0, 150, 136)',
                                  data: hiredList,
                                  barGap: '0%',
                                  barCategoryGap: '10px'
                              }
                          ]
                      });
                  },

              })
          });
      });

  </script>

  <script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'jquery', 'table', 'form', 'layer', 'laydate'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,layer = layui.layer


      $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
      });
  });
  </script>
</body>
</html>